<head xmlns:v-on="http://www.w3.org/1999/xhtml">
    <meta charset="utf-8">
    <title>密码列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css"/>
    <link rel="stylesheet" type="text/css" href="../css/pwd/pwd.css"/>
</head>

<body>
<div id="app">

    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title"  >密码仓库列表  </h1>
        <a @click="add()" class="active" style="float: right" ><span class="mui-icon mui-icon-plusempty" ></span></a>
    </header>
    <div class="mui-content mui-row mui-fullscreen">
        <div class="mui-col-xs-3">
            <div id="segmentedControls"
                 class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
                <a class="mui-control-item" v-for="(item, i) in pwdaList" @click="listqh(i)" >
                    {{item.ckName}}
                </a>
            </div>
        </div>
        <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;" >
            <li class="mui-table-view-cell" v-for="(item, i) in pwda" @click="pwdClick(item.id)">账号：{{item.name}}，密码：{{item.sacredtokenPassword.passWord}}</li>
        </div>
    </div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script>
     var vm = new Vue({
         el: '#app',
         data: {
            rdata:'',
            pwdaList:[],
            pwda:[],
            tea:'123'
         },
         mounted:function(){
           this.login();
         },
         methods: {
             add : function(){
                 console.log("新增");
             },
             login: function () {
                 let _this = this;
                 axios
                     .get('/pwd/pwdList', null)
                     .then(function (response) {
                         if (response.data.code == 200) {
                             _this.rdata=response.data;
                             _this.pwdaList = response.data.data;
                             _this.pwda =  response.data.data[0].pwdList;
                             console.log(_this.pwda);
                         }
                     })
                     .catch(function (error) { // 请求失败处理
                         console.log(error);
                     });
             },
             listqh: function(i){
                 this.pwda = this.rdata.data[i].pwdList;
                 console.log(this.pwda+"=========");
             },
             pwdClick:function(id){
                 console.log("id="+id+"=========");
             }
         }
     })
    // mui.init({
    //     swipeBack: true //启用右滑关闭功能
    // });

    <#--var pwdlist= ${pwdList};-->
    <#--var controls = document.getElementById("segmentedControls");-->
    <#--var contents = document.getElementById("segmentedControlContents");-->
    <#--var html = [];-->
    <#--var i = 1,-->
    <#--    j = 1,-->
    <#--    m = 16, //左侧选项卡数量+1-->
    <#--    n = 21; //每个选项卡列表数量+1-->
    <#--for (; i < m; i++) {-->
    <#--    html.push('<a class="mui-control-item" href="#content' + i + '">选项' + i + '</a>');-->
    <#--}-->
    <#--controls.innerHTML = html.join('');-->
    <#--html = [];-->
    <#--for (i = 1; i < m; i++) {-->
    <#--    html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');-->
    <#--    for (j = 1; j < n; j++) {-->
    <#--        html.push('<li class="mui-table-view-cell">第' + i + '个选项卡子项-' + j + '</li>');-->
    <#--    }-->
    <#--    html.push('</ul></div>');-->
    <#--}-->
    <#--contents.innerHTML = html.join('');-->
    <#--//默认选中第一个-->
    <#--controls.querySelector('.mui-control-item').classList.add('mui-active');-->
    <#--contents.querySelector('.mui-control-content').classList.add('mui-active');-->
</script>


